
import { createHashRouter } from 'react-router-dom'

import Login from '../page/Login'
import Article from '../page/Article'
import Layout from '../page/Layout'
import Board from '../page/Board'
import About from '../page/About'
import NotFount from '../page/NotFound'

// 创建路由器实例
// createBrowserRouter ==> history
// createHashRouter    ==> hash
const router = createHashRouter([

  // 404 路由配置
  // 跟顺序无关，会优先匹配其他的路由，最后再匹配通配符路由
  // 跟 VueRouter 类似，在初始化路由器时，会将通配符路由自动放到最后
  // addRoute( ...动态路由, 404 )
  { path: '*', element: <NotFount /> },

  {
    path: '/home',
    element: <Layout />,
    children: [
      // 子路由的path，不支持以 / 开头，只能是相对路径
      // { path: 'board', element: <Board /> },
      // 有 index: true，就表示为该父路由的默认子路由配置
      { index: true, element: <Board /> },
      { path: 'about', element: <About /> },
    ]
  },

  { path: '/login', element: <Login /> },
  // 动态参数，
  // 注意：动态参数是属于路径不可缺失的一部分
  // 查询参数不是属于路径的一部分，是可有可无的，最终都能跳到对应的路径
  { path: '/article/:id/:name', element: <Article /> },
])

export default router
